<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS Layout Examples</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>

<h2>流式布局</h2>
<div class="normal-flow">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

<h2>浮动布局</h2>
<div class="float-layout">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3"></div>
</div>

<h2>弹性盒子布局</h2>
<div class="flex-layout">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

<h2>定位布局</h2>
<div class="position-layout">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div>45677899</div>
</div>
<div>123123123</div>

</body>
</html>